/* eslint-disable no-irregular-whitespace */
// @ts-nocheck
import React, { FC, useEffect, useState } from 'react'
import style from '@/style/articles/tab.module.scss'
import axios from '@/api/request'
import { useNavigate, NavLink } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { useTranslation } from 'react-i18next'

const Tab: FC = ({ change, reset }) => {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const { t } = useTranslation()
  // 数据
  const [data, setData] = useState([])
  const [idx, setIdx] = useState(-1)
  useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/no-floating-promises
    axios.get('/wipi/api/category').then((res) => {
      setData(res.data)
    })

    // eslint-disable-next-line @typescript-eslint/no-floating-promises
    axios.get('/wipi/api/article').then(res => {
      dispatch({
        type: 'GETDATA',
        payload: [...res.data[0]]
      })
    })
  }, [])

  // 跳转路由
  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
  const btn = () => {
    navigate('/articles')
    setIdx(-1)
    change(0)
    reset()
    // eslint-disable-next-line @typescript-eslint/no-floating-promises
    axios.get('/wipi/api/article').then(res => {
      dispatch({
        type: 'GETDATA',
        payload: [...res.data[0]]
      })
    })
  }
  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
  const btns = (index) => {
    setIdx(index)
    change(1)
    reset()
  }

  return (
    <div className={style.tab}>
      <p
        style={idx === -1 ? { color: '#ff0064' } : { color: '#000' }}
        onClick={() => btn()}
      >
        {t('All')}
      </p>
      {data.map((item, index) => {
        return (
          <p key={index} onClick={() => btns(index)}>
            <NavLink
              style={idx === index ? { color: '#ff0064' } : { color: '#000' }}
              /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */
              to={`/articles/categroy/${item.value}`}
            >
              {item.label}
            </NavLink>
          </p>
        )
      })}
    </div>
  )
}

export default Tab
